<template>
  <!-- 审核意见卡片 -->
  <view class="opinion-card pa-12 br-8">
    <view class="disFlxAC mb-12">
      <text class="fz-16 mr-4">{{ item?.userName }}</text>
      <CustomTag
        v-if="item?.positionName"
        :text="item?.positionName"
        font-size="24rpx"
        color="#EA5E0E"
        background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
        padding="4rpx 12rpx"
      />
    </view>
    <InfoRow label="审核标签：" label-color="#969799">
      <view class="disFlxAC flex-wrap" style="gap: 16rpx">
        <template v-for="(v, i) in getEvaluationTag" :key="i">
          <CustomTag
            :text="v"
            font-size="20rpx"
            background-color="#2878FF"
            color="#fff"
            padding="4rpx 12rpx"
          />
        </template>
      </view>
    </InfoRow>
    <InfoRow
      v-if="item?.approvalRemark"
      label="审核备注："
      label-color="#969799"
      :value="item?.approvalRemark"
    />
  </view>
</template>

<script setup lang="ts">
  import CustomTag from '@/components/CustomTag/index.vue';
  import InfoRow from '../../components/InfoRow.vue';
  import { computed, type PropType } from 'vue';
  import type { IApplySecreariatVoAuditorItem } from '@/api/businessOpportunities/type';
  import { PublicBooleanEnum } from '@/enums/publicModuleEnum';
  import { isString } from 'lodash-es';

  const props = defineProps({
    item: Object as PropType<IApplySecreariatVoAuditorItem>,
  });

  const getEvaluationTag = computed(() => {
    const item = props.item;
    let tags: string[] = [
      item?.applicantContactStatus === PublicBooleanEnum.YES ? '已联系' : '未联系',
    ];
    const evaluationTag = item?.evaluationTag;
    if (isString(evaluationTag)) {
      tags = [...tags, ...evaluationTag.split(',')];
    }
    return tags;
  });
</script>

<style lang="scss" scoped>
  .color3 {
    color: #999996;
  }

  .opinion-card {
    background-color: #f2f3f5;
  }
</style>
